<template>
	<div id="home" class="min_width">
		<!-- 头部导航 -->
		<Header></Header>
		<main class="mainShow">
			<!-- 左侧导航 -->
			<div class="main-left">
				<!-- 多级导航 -->
				<el-aside width="100%" style="color: #333">
					<el-menu default-active="/messageList" :router="true">
						<el-menu-item index="/messageList"  :class="{'isActive': active == '/messageList' || active == '/messageDetail' }" @click='reload()'>
							<span slot="title">消息通知</span>
						</el-menu-item>						
					</el-menu>
				</el-aside>

			</div>

			<!-- 右侧主内容区 -->
			<div class="main-right">
				<transition name="fade">
					<router-view class="view"  :key="activeDate"></router-view>
				</transition>
			</div>
		</main>
	</div>
</template>

<script>
	import $ from 'jquery';
	export default {
		name: 'informMsg',
		data: function() {
			return {
				activeDate:'',//重新刷新
				active: '/messageList',//默认地址
				headerFixed: true,
			}
		},
		created: function() {
		},
		// 提供可注入子组件属性
		provide () {
			return {
				reload: this.reload
			}
		},
		methods: {
			//当前选中状态 reload定义
			reload() {
				// $nextTick() 将回调延迟到下次 DOM 更新循环之后执行
				this.$nextTick(() => {
					this.activeDate = Number(Date.parse(new Date()));
				})
			},
			//账户信息
			jumpAccountInformation() {
				//this.$router.push('/messageList');
			},
			//退出登录
			logout() {
				var _this = this;
				this.$confirm('确认退出吗?', '提示', {}).then(() => {
					_this.$router.push('/');
				}).catch(() => {

				});
			},
			//消息
			jumpInformatica() {
				this.$router.push({
					path: '/'
				})
			},
			//获取屏幕高度
			getHeight() {
				 var newHeight=$(window).height()-100;
				 $('.mainShow').css("min-height", newHeight + 'px');

			},
			handleSelect(key, keyPath) {
				// console.log(key, keyPath);
			}

		},
		mounted() {
			this.getHeight();
		},
		watch: {
				'$route': function (to,from) {
			     this.active = from.path;
			},
			deep:true
		}
	}
</script>

<style>
	body {
		margin: 0;
	}
	
	#home {
		margin: 0 auto;
	}


</style>